<template>
  <component
    :is="dialog ? 'el-dialog' : 'div'"
    title="渠道信息"
    :modelValue="modelValue"
    align-center
    width="936px"
    class="public-dialog"
    @close="handleClose"
    destroy-on-close
    :close-on-click-modal="false"
  >
    <vxe-grid ref="tableRef" v-bind="tableOptions" />
    <template #footer>
      <div class="flex items-center justify-center py-[10px]">
        <el-button @click="handleClose">
          关闭
        </el-button>
      </div>
    </template>
  </component>
</template>
<script setup lang="jsx">
import { logisticsChannel } from "../../api";

const props = defineProps({
  modelValue: { type: Boolean, default: true },
  id: { type: [String, Number], default: "" },
  dialog: { type: Boolean, default: true },
});

const emit = defineEmits(["update:modelValue", "close"]);

const tableRef = ref();

watch(
  () => props.id,
  (val) => {
    if (!val) return;
    tableRef.value?.commitProxy?.("query");
  }
);

const tableOptions = reactive({
  round: true,
  height: "400",
  columnConfig: {
    resizable: true,
  },
  columns: [
    { title: "编号", fixed: "left", width: 50, type: "seq" },
    { title: "渠道名称", fixed: "left", minWidth: 120, field: "channel_name" },
    { title: "渠道英文名", minWidth: 120, field: "channel_en_name" },
    { title: "渠道代码", width: 120, field: "todo" },
    { title: "揽收商", width: 230, field: "todo1" },
    { title: "代理人", width: 120, field: "todo2" },
    { title: "联系方式", width: 120, field: "todo3" },
    { title: "渠道状态", width: 120, field: "channel_status" },
    { title: "物流商API名称", width: 230, field: "api_name" },
    { title: "物流商API状态", width: 120, field: "api_status" },
  ],
  proxyConfig: {
    autoLoad: false, // 是否自动加载查询数据
    props: {
      list: "data",
    },
    ajax: {
      query: () => {
        const { id = "" } = props || {};
        return logisticsChannel({
          id,
        });
      },
    },
  },
});

const handleClose = () => {
  emit("update:modelValue", false);
  emit("close");
};
</script>
